import React, { useEffect, useState } from "react";
import { LeftOutline } from "antd-mobile-icons";
import { useNavigate } from "react-router-dom";
import { Footer } from "antd-mobile";
import axios from "axios";
import "./Search.css";

export default function Search() {
  const navigate = useNavigate();
  const [searchTerm, setSearchTerm] = useState(""); //存储当前输入的搜索词
  const [searchHistory, setSearchHistory] = useState([]); //存储搜索历史记录
  const [data, setData] = useState([]);
  const [list, setList] = useState([]);

  const getList = () => {
    axios.get(`/Lmy/findData?query=${searchTerm}`).then((res) => {
      setData(res.data.data);
    });
  };

  const getData = () =>{
    axios.get(`/Lmy/list`).then((res) => {
      setList(res.data.data);
    });
  }

  useEffect(() => {
    getData()
    const history = JSON.parse(localStorage.getItem("searchHistory")) || [];
    setSearchHistory(history);
  }, []);

  useEffect(() => {
    localStorage.setItem("searchHistory", JSON.stringify(searchHistory));
  }, [searchHistory]);

  const handleSearch = (event) => {
    if (event.keyCode !== 13) return;
    // 避免重复项
    getList();
    setSearchHistory([searchTerm, ...searchHistory]);
    setSearchTerm("");
  };

  const handleChange = (event) => {
    setSearchTerm(event.target.value);
  };

  const clearHistory = () => {
    setSearchHistory([]);
    localStorage.removeItem("searchHistory");
  };

  return (
    <div>
      <header>
        <LeftOutline
          style={{ color: "white", fontSize: "30px" }}
          onClick={() => {
            navigate("/header");
          }}
        />
        <div className="header_ipt">
          <input
            type="text"
            className="inp"
            placeholder="请输入搜索内容"
            onChange={handleChange}
            value={searchTerm}
            onKeyDown={handleSearch}
            onClick={() => {
              setData([]);
            }}
          />
        </div>
      </header>
      <div
        className="box1"
        style={{ display: data.length <= 0 ? "block" : "none" }}
      >
        <div className="search-one">
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              alignItems: "center",
            }}
          >
            <p style={{ padding: "0.9375rem", fontSize: "0.9375rem" }}>
              搜索历史
            </p>
            <p>
              <img
                src="./public/删除.png"
                alt=""
                style={{
                  width: "0.9375rem",
                  height: "0.9375rem",
                  marginRight: "1.25rem",
                }}
                onClick={clearHistory}
              />
            </p>
          </div>
          <div>
            <ul className="search-da">
              {searchHistory.map((term, index) => (
                <li key={index}>{term}</li>
              ))}
            </ul>
          </div>
        </div>
        <div>
          <Footer
            style={{
              width: "100%",
              height: "1.875rem",
              background: "rgb(241,248,255)",
              marginTop: "3.125rem",
            }}
            label={
              <div
                style={{
                  display: "flex",
                  height: "3.125rem",
                  lineHeight: "3.125rem",
                  color: "black",
                }}
              >
                <span>
                  <img
                    src="./public/推荐.png"
                    alt=""
                    style={{ width: "3.125rem", height: "3.125rem" }}
                  />
                </span>
                <span style={{ fontSize: "0.9375rem", marginLeft: "0.625rem" }}>
                  更多推荐
                </span>
              </div>
            }
          ></Footer>
        </div>
        <div style={{ padding: "1.25rem" }}>
          <div className="search-bottom">
            <p>
              <img src="./public/芒果.png" alt="" />
            </p>
            <div style={{ lineHeight: "1.875rem", marginTop: "0.9375rem" }}>
              <p style={{ fontSize: "18px" }}>纯天然水果（500g）</p>
              <p style={{ fontSize: "15px", color: "gray" }}>
                纯天然种植 | 自然生长 | 绿色食品
              </p>
              <p style={{ color: "red" }}>
                <span>￥</span>
                <span style={{ fontSize: "1.1875rem" }}>60.00</span>
              </p>
            </div>
          </div>
          <div className="search-bottom">
            <p>
              <img src="./public/晴王.png" alt="" />
            </p>
            <div style={{ lineHeight: "1.875rem", marginTop: "0.9375rem" }}>
              <p style={{ fontSize: "18px" }}>纯天然水果（500g）</p>
              <p style={{ fontSize: "15px", color: "gray" }}>
                纯天然种植 | 自然生长 | 绿色食品
              </p>
              <p style={{ color: "red" }}>
                <span>￥</span>
                <span style={{ fontSize: "1.1875rem" }}>60.00</span>
              </p>
            </div>
          </div>
          <div className="search-bottom">
            <p>
              <img src="./public/榴莲.png" alt="" />
            </p>
            <div style={{ lineHeight: "1.875rem", marginTop: "0.9375rem" }}>
              <p style={{ fontSize: "18px" }}>纯天然水果（500g）</p>
              <p style={{ fontSize: "15px", color: "gray" }}>
                纯天然种植 | 自然生长 | 绿色食品
              </p>
              <p style={{ color: "red" }}>
                <span>￥</span>
                <span style={{ fontSize: "1.1875rem" }}>60.00</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div
        style={{
          display: data.length > 0 ? "block" : "none",
          background: "rgb(244,248,255)",
          height: "100vh",
        }}
      >
        {data.map((item) => {
          return (
            <div
              key={item._id}
              className="search-conent"
              onClick={() => {
                navigate(`/show?id=${item._id}`);
              }}
            >
              <img
                src={item.image}
                alt=""
                style={{
                  borderRadius: "1.25rem",
                  width: "6.25rem",
                  height: "6.25rem",
                  margin: "0.9375rem",
                }}
              />
              <div style={{ lineHeight: "1.875rem", width: "100%" }}>
                <p style={{ marginTop: "0.9375rem", fontSize: "1.0625rem" }}>
                  {item.name}
                </p>
                <p>{item.context}</p>
                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                >
                  <p style={{ color: "red" }}>
                    <span>￥</span>
                    <span style={{ fontSize: "1.1875rem" }}>{item.price}</span>
                  </p>
                  <p style={{ marginRight: "0.9375rem" }}>{item.sold}</p>
                </div>
              </div>
            </div>
          );
        })}
      </div>
    </div>
  );
}
